<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>禁用鼠标点击功能管理 - Wiseai</title>
    {{include "share/headcss.html" .}}
    <style>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a56e4;
            --primary-light: #e6f0ff;
            --light-bg: #f8fafc;
            --dark: #1e293b;
            --light: #ffffff;
            --gray: #64748b;
            --border: #e2e8f0;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            --transition: all 0.3s ease;
            --radius: 12px;
            --success: #10b981;
            --info: #06b6d4;
            --warning: #f59e0b;
            --danger: #ef4444;
            --view-color: #10b981;
            --view-dark: #0d9f6e;
        }

        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background: linear-gradient(135deg, #f0f5ff 0%, #f7f9fc 100%);
            color: var(--dark);
            line-height: 1.6;
            padding-top: 10px;
            min-height: 100vh;
        }

        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            min-height: 86vh;
        }

        .app-section {
            border-radius: var(--radius);
            background: var(--light);
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            overflow: hidden;
            margin-bottom: 30px;
            position: relative;
        }

        .app-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary), #818cf8);
        }

        .app-header {
            background: linear-gradient(to right, var(--primary-light), #f0f5ff);
            padding: 20px 30px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .app-content {
            padding: 25px;
        }

        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: var(--gray);
            font-weight: 400;
            margin-top: 5px;
        }

        .header-actions {
            display: flex;
            gap: 10px;
        }

        .btn-add-content {
            background: linear-gradient(135deg, var(--primary), #6366f1);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
        }

        .btn-add-content:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(79, 70, 229, 0.3);
        }

        .action-btn {
            background: none;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            margin: 0 5px;
        }

        .action-btn.edit {
            color: #f59e0b;
            background-color: #fef3c7;
        }

        .action-btn.edit:hover {
            background-color: #fde68a;
        }

        .action-btn.delete {
            color: #ef4444;
            background-color: #fee2e2;
        }

        .action-btn.delete:hover {
            background-color: #fecaca;
        }

        .content-name-link {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .content-name-link:hover {
            color: var(--primary);
            text-decoration: underline;
        }

        .content-icon {
            color: var(--primary);
            font-size: 1.2rem;
        }

        .order-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: var(--primary-light);
            color: var(--primary-dark);
            border-radius: 8px;
            font-weight: 600;
        }

        .tag-item {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary-dark);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin: 2px;
        }

        /* 表单下拉选择器样式 */
        .form-select {
            display: block;
            width: 100%;
            padding: 0.7rem 1rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--dark);
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            transition: var(--transition);
            appearance: none;
        }

        .form-select:focus {
            border-color: var(--primary);
            outline: 0;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
        }

        .empty-state i {
            font-size: 4rem;
            color: #cbd5e1;
            margin-bottom: 20px;
        }

        .empty-state h5 {
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            min-width: 300px;
        }

        .toast {
            border-radius: var(--radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .toast-header {
            font-weight: 600;
        }

        /* 模态框样式 */
        .modal-content {
            border-radius: var(--radius);
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            background: linear-gradient(to right, var(--primary-light), #f0f5ff);
            border-bottom: 1px solid var(--border);
            padding: 15px 20px;
        }

        .modal-title {
            font-weight: 600;
            color: var(--dark);
        }

        .modal-body {
            padding: 25px;
        }

        .form-label {
            font-weight: 500;
            color: var(--dark);
            margin-bottom: 8px;
        }

        .form-control {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 15px;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        }

        .invalid-feedback {
            font-size: 0.85rem;
        }

        .modal-footer {
            padding: 15px 25px;
            border-top: 1px solid var(--border);
        }

        /* 删除确认模态框 */
        .delete-confirm-box {
            padding: 20px;
            background: #fff8f8;
            border-radius: 10px;
            text-align: center;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {

            .table th,
            .table td {
                padding: 12px 15px;
            }

            .content-preview {
                -webkit-line-clamp: 1;
            }

            .header-actions {
                flex-direction: column;
                width: 100%;
            }

            .btn-show-content,
            .btn-add-content {
                width: 100%;
                justify-content: center;
                margin: 5px 0;
            }
        }

        @media (max-width: 768px) {
            .app-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

        @media (max-width: 576px) {
            body {
                padding-top: 70px;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .app-content {
                padding: 15px;
            }
        }

        /* footer样式 */
        .footer {
            background: #1e293b;
            color: #cbd5e1;
            padding: 50px 0 30px;
            margin-top: 30px;
        }
    
        .footer-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }
    
        .footer-link {
            color: #cbd5e1;
            text-decoration: none;
            margin: 0 12px 10px;
            transition: var(--transition);
        }
    
        .footer-link:hover {
            color: white;
            text-decoration: underline;
        }
    
        .footer-copyright {
            text-align: center;
            font-size: 0.9rem;
            color: #94a3b8;
        }
    </style>
</head>

<body>
    <!-- Toast通知 -->
    <div class="toast-container">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header text-white bg-success">
                <i class="fas fa-check-circle me-2"></i>
                <strong class="me-auto">操作成功</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
            <div class="toast-body">
                操作已成功完成！
            </div>
        </div>

        <div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header text-white bg-danger">
                <i class="fas fa-exclamation-circle me-2"></i>
                <strong class="me-auto">操作失败</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
            <div class="toast-body">
                无法完成操作，请重试。
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    {{include "share/head.html" .}}

    <!-- 内容管理区域 -->
    <div class="app-container">
        <div class="app-section">
            <div class="app-header">
                <div>
                    <h2 class="section-title">禁用鼠标点击功能</h2>
                    <p class="section-subtitle">管理需要禁用鼠标点击的class或者id</p>
                </div>
                <div class="header-actions">
                    <button type="button" class="btn btn-add-content" id="backpptBtn">
                        <i class="fas fa-arrow-left"></i> 返回PPT管理页
                    </button>
                    <button type="button" class="btn btn-add-content" data-bs-toggle="modal"
                        data-bs-target="#contentModal" id="addContentBtn">
                        <i class="fas fa-plus"></i> 添加类名
                    </button>
                </div>
            </div>

            <div class="app-content">
                <!-- 内容列表 -->
                <div class="content-table-container">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th width="20%">ID</th>
                                <th width="60%">class或者id</th>
                                <th width="20%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="contentList">
                            {{range $k, $v := .dianji}}
                                <tr data-id="{{$v.id}}">
                                    <td>{{$k | plus 1}}</td>
                                    <td>
                                        <span class="content-name">{{$v.classORid}}</span>
                                    </td>
                                    <td>
                                        <button class="action-btn edit" data-id="{{$v.id}}" data-bs-toggle="modal"
                                            data-bs-target="#contentModal">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete" data-id="{{$v.id}}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            {{end}}
                            
                            <!-- <tr data-id="3">
                                <td>3</td>
                                <td>
                                    <span class="content-name">prevent-click</span>
                                </td>
                                <td>
                                    <button class="action-btn edit" data-id="3" data-bs-toggle="modal"
                                        data-bs-target="#contentModal">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn delete" data-id="3">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>                
            </div>
        </div>
    </div>

    <!-- 添加/编辑内容模态框 -->
    <div class="modal fade" id="contentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">添加新类名</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="contentForm" class="needs-validation" novalidate>
                    <div class="modal-body">
                        <input type="hidden" id="contentId" name="id">

                        <div class="mb-4">
                            <label for="className" class="form-label">类名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="className" name="class_name" required
                                placeholder="输入需要禁用点击的类名">
                            <div class="invalid-feedback">
                                请输入类名
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-add-content">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="delete-confirm-box">
                        <i class="fas fa-exclamation-triangle text-danger mb-3" style="font-size: 2.5rem;"></i>
                        <h5>确定要删除这个类名吗？</h5>
                        <p class="text-muted">此操作不可撤销，所有相关内容将被永久删除。</p>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
                </div>
            </div>
        </div>
    </div>  

    <!-- 页脚 -->
    {{include "share/footer.html" .}}
    {{include "share/headjs.html" .}}
    <script>
        // 页面加载完成时初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 模态框显示/隐藏处理
            const contentModal = document.getElementById('contentModal');
            const contentForm = document.getElementById('contentForm');
            const modalTitle = document.getElementById('modalTitle');
            const addContentBtn = document.getElementById('addContentBtn');
            const backpptBtn = document.getElementById('backpptBtn');

            // 删除目标内容 ID
            let targetDeleteContentId = null;

            // 添加按钮事件
            addContentBtn.addEventListener('click', function () {
                resetModal();
                modalTitle.textContent = '添加新类名';
            });
            backpptBtn.addEventListener('click', function () {
                // 跳转到内容显示页面（需替换为实际URL）
                window.location.href = '/';
            });

            // 编辑按钮事件
            document.querySelectorAll('.action-btn.edit').forEach(button => {
                button.addEventListener('click', function () {
                    const id = this.getAttribute('data-id');
                    const contentRow = document.querySelector(`tr[data-id="${id}"]`);

                    // 填充表单数据
                    document.getElementById('contentId').value = id;
                    document.getElementById('className').value = contentRow.querySelector('.content-name').textContent.trim();

                    modalTitle.textContent = '编辑类名';
                });
            });

            // 删除按钮事件
            document.querySelectorAll('.action-btn.delete').forEach(button => {
                button.addEventListener('click', function () {
                    const id = this.getAttribute('data-id');
                    targetDeleteContentId = id;
                    openDeleteModal(id);
                });
            });

            // 确认删除按钮
            document.getElementById('confirmDelete').addEventListener('click', function () {
                if (targetDeleteContentId) {
                    fetch('/dianji/delete', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ id: targetDeleteContentId })
                    })
                        .then(response => {
                            if (response.ok) {
                                let contentRow = document.querySelector(`tr[data-id="${targetDeleteContentId}"]`);
                                if (contentRow) {
                                    contentRow.remove();
                                    showNotification('类名删除成功！', 'success');
                                } else {
                                    showNotification('类名不存在！', 'error');
                                }
                            } else {
                                showNotification('出现错误，请检查服务！', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('删除类名错误:', error);
                            showNotification('删除类名时发生错误', 'error');
                        });
                    // 关闭模态框
                    const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                    deleteModal.hide();
                }
            });

            // 内容表单提交
            contentForm.addEventListener('submit', function (e) {
                e.preventDefault();

                // 表单验证
                if (!this.checkValidity()) {
                    e.stopPropagation();
                    this.classList.add('was-validated');
                    return;
                }

                // 获取表单数据
                const contentData = {
                    id: document.getElementById('contentId').value || 0,
                    classORid: document.getElementById('className').value
                };

                // 确定是创建还是更新
                const isNewContent = !contentData.id;

                // 发送POST/PUT请求
                fetch('/dianji/save', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(contentData)
                })
                    .then(response => {
                        if (response.ok) {
                            showNotification(isNewContent ? '添加类名成功' : '更新类名成功', 'success');
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            showNotification(isNewContent ? '添加类名失败' : '更新类名失败', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('提交类名数据错误:', error);
                        showNotification(isNewContent ? '添加类名失败' : '更新类名失败', 'error');
                    });

                // 隐藏模态框
                const modal = bootstrap.Modal.getInstance(contentModal);
                modal.hide();
            });
        });

        // 重置模态框
        function resetModal() {
            document.getElementById('contentForm').reset();
            document.getElementById('contentForm').classList.remove('was-validated');
            document.getElementById('contentId').value = '';
        }

        // 打开删除确认模态框
        function openDeleteModal(contentId) {
            targetDeleteContentId = contentId;
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }

        // 显示通知
        function showNotification(message, type) {
            const toastEl = type === 'success' ?
                document.getElementById('successToast') :
                document.getElementById('errorToast');

            // 自定义消息处理
            if (message) {
                const toastBody = toastEl.querySelector('.toast-body');
                toastBody.textContent = message;
            }

            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        }
    </script>
</body>

</html>